<template>
	<div class="xianqing">
	<!--返回按钮-->	
	<mt-header>
	  	<router-link to="/" slot="left">
	    	<mt-button icon="back"></mt-button>
	  	</router-link>
		<mt-button icon="more" slot="right"></mt-button>
	</mt-header>
	<!--轮播图-->
	<div class="">
		<el-carousel indicator-position="outside">
		    <el-carousel-item>
				<img :src="arr.url"/>
		    </el-carousel-item>
		    <el-carousel-item>
				<img :src="arr.l_url"/>
		    </el-carousel-item>
		    <el-carousel-item>
				<img :src="arr.s_url"/>
		    </el-carousel-item>
		    <el-carousel-item>
				<img :src="arr.m_url"/>
	    	</el-carousel-item>
	  	</el-carousel>
	  	<p>{{arr.name}}</p>
	  	<p style="color: red;">¥{{arr.price}}</p>
	</div>
	<div class="cuxiao">
		<div class="cx">促销:</div>
		<div class="xiao">
			<p><span><font color='#26A2FF'>{{arr.listProActinfo[0].bat_name}}</font></span>{{arr.listProActinfo[0].infoa_name}}</p>
			<p><span><font color='#26A2FF'>{{arr.listProActinfo[1].bat_name}}</font></span>{{arr.listProActinfo[1].infoa_name}}</p>
			
		</div>
	</div>
	<div class="">
		<div class="cuxiao">
			<div class="cx">送至:</div>
			<div class="xiao">
				<p>{{arr.listProActinfo[0].infoa_name}}</p>	
				<div class="xiao-ding">
					<el-cascader :options="options" change-on-select></el-cascader>
				</div>
			</div>		
		</div>
		<div class="cuxiao">
			<div class="cx">运费:</div>
			<div class="xiao">
				<p>免运费</p>			
			</div>		
		</div>
	</div>
	<!--<div class="ding">-->
		<mt-tabbar class='az'>
		<ul>
			<li><router-link to="/">客服</router-link></li>
	    	<li><router-link to="/jingxuan">关注</router-link></li>
	    	<li><router-link to="/gou">
	    		<el-badge :value = x class="item">
				  <el-button size="small">购物车</el-button>
				</el-badge>
	    		</router-link></li>
	    	<li> <el-button :plain="true" @click="open2">加入购物车</el-button></li>
	    	
		</ul>
		</mt-tabbar>
		
	<!--</div>-->

  </div>
</template>

<script>
	import $ from 'jquery';
	import Router from 'vue-router';
	import axios from 'axios';
 export default {
    data() {
      return {
      	x:0,
        activeNames: ['1'],
        arr:[],
      	options: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }, {
          value: 'zujian',
          label: '组件',
          children: [{
            value: 'basic',
            label: 'Basic',
            children: [{
              value: 'layout',
              label: 'Layout 布局'
            }, {
              value: 'color',
              label: 'Color 色彩'
            }, {
              value: 'typography',
              label: 'Typography 字体'
            }, {
              value: 'icon',
              label: 'Icon 图标'
            }, {
              value: 'button',
              label: 'Button 按钮'
            }]
          }, {
            value: 'form',
            label: 'Form',
            children: [{
              value: 'radio',
              label: 'Radio 单选框'
            }, {
              value: 'checkbox',
              label: 'Checkbox 多选框'
            }, {
              value: 'input',
              label: 'Input 输入框'
            }, {
              value: 'input-number',
              label: 'InputNumber 计数器'
            }, {
              value: 'select',
              label: 'Select 选择器'
            }, {
              value: 'cascader',
              label: 'Cascader 级联选择器'
            }, {
              value: 'switch',
              label: 'Switch 开关'
            }, {
              value: 'slider',
              label: 'Slider 滑块'
            }, {
              value: 'time-picker',
              label: 'TimePicker 时间选择器'
            }, {
              value: 'date-picker',
              label: 'DatePicker 日期选择器'
            }, {
              value: 'datetime-picker',
              label: 'DateTimePicker 日期时间选择器'
            }, {
              value: 'upload',
              label: 'Upload 上传'
            }, {
              value: 'rate',
              label: 'Rate 评分'
            }, {
              value: 'form',
              label: 'Form 表单'
            }]
          }, {
            value: 'data',
            label: 'Data',
            children: [{
              value: 'table',
              label: 'Table 表格'
            }, {
              value: 'tag',
              label: 'Tag 标签'
            }, {
              value: 'progress',
              label: 'Progress 进度条'
            }, {
              value: 'tree',
              label: 'Tree 树形控件'
            }, {
              value: 'pagination',
              label: 'Pagination 分页'
            }, {
              value: 'badge',
              label: 'Badge 标记'
            }]
          }, {
            value: 'notice',
            label: 'Notice',
            children: [{
              value: 'alert',
              label: 'Alert 警告'
            }, {
              value: 'loading',
              label: 'Loading 加载'
            }, {
              value: 'message',
              label: 'Message 消息提示'
            }, {
              value: 'message-box',
              label: 'MessageBox 弹框'
            }, {
              value: 'notification',
              label: 'Notification 通知'
            }]
          }, {
            value: 'navigation',
            label: 'Navigation',
            children: [{
              value: 'menu',
              label: 'NavMenu 导航菜单'
            }, {
              value: 'tabs',
              label: 'Tabs 标签页'
            }, {
              value: 'breadcrumb',
              label: 'Breadcrumb 面包屑'
            }, {
              value: 'dropdown',
              label: 'Dropdown 下拉菜单'
            }, {
              value: 'steps',
              label: 'Steps 步骤条'
            }]
          }, {
            value: 'others',
            label: 'Others',
            children: [{
              value: 'dialog',
              label: 'Dialog 对话框'
            }, {
              value: 'tooltip',
              label: 'Tooltip 文字提示'
            }, {
              value: 'popover',
              label: 'Popover 弹出框'
            }, {
              value: 'card',
              label: 'Card 卡片'
            }, {
              value: 'carousel',
              label: 'Carousel 走马灯'
            }, {
              value: 'collapse',
              label: 'Collapse 折叠面板'
            }]
          }]
        }, {
          value: 'ziyuan',
          label: '资源',
          children: [{
            value: 'axure',
            label: 'Axure Components'
          }, {
            value: 'sketch',
            label: 'Sketch Templates'
          }, {
            value: 'jiaohu',
            label: '组件交互文档'
          }]
        }],
        selectedOptions: [],
        selectedOptions2: [],
        z:[]
   
      }
    },
   
    methods:{
    	 handleChange(value) {
        	console.log(value);
      	},
    	get(){
    		var _this = this;	
    		eventBus.$on('data',function(val){
    			localStorage.b = JSON.stringify(val)
    			console.log(val)
    			_this.arr = JSON.parse(localStorage.b)
    			
    		})
    	},
    	aad(){	
    		var _this = this;		
    axios.get('http://localhost:8080/static/data/05-2.json').then(function(data){
    			
//  			console.log(_this.arr)
    		})
    	},
    	open2() {
        this.$message({
          message: '恭喜你，添加购物车成功',
          type: 'success',
          
        });
        this.x++; 
        console.log(this.x)
        this.z.push(this.arr)
//      console.log(this.z)
      },

    },	
    mounted(){
    	this.aad()
    	this.get()
    }
    	
    
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .xianqing{
  	margin-top: 35px;
  
  }
  /*促销模块*/
 .cuxiao{
 	width: 100%;
 	display: flex;
 	flex-direction: row;
 	padding-top: 10px;
 }
 .xiao{
 	width: 70%;
 	flex: 1;
 	display: flex;
 	flex-direction:column;
 	position:relative;
	
 }
 .xiao-ding{
 	position: absolute;
 	right: 0;
 }
 .xiao span{
 	display: inline-block;
 	border: 1px solid #26A2FF;
 	border-radius: 5px;
 	margin: 0 15px 10px 15px;
 	padding: 0 10px;
 	
 }
 
 
 .az{
	position:fixed;
	width:100%;
	buttom: 10px;
	left:0;
	z-index: 9999;
	
}
.az ul{
	width:100%;
	height:100;
	display: flex;
	
	justify-content:space-around;
}



</style>
